<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import * as echarts from 'echarts'
import dayjs from 'dayjs'

// 状态初始化
const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
let timer: number = 0

// 图表引用
const facilitiesChartRef = ref<HTMLElement | null>(null)
const investmentChartRef = ref<HTMLElement | null>(null)
const emissionsChartRef = ref<HTMLElement | null>(null)

// 当前选项卡
const currentTab = ref('overview')

// 当前选中的企业
const currentEnterprise = ref(1)

// 企业列表
const enterprises = ref([
  { id: 1, name: '灵璧县化工厂' },
  { id: 2, name: '灵璧县塑料制品厂' },
  { id: 3, name: '灵璧县电子科技有限公司' },
  { id: 4, name: '灵璧县机械制造厂' },
  { id: 5, name: '灵璧县食品加工厂' }
])

// 企业详细数据
const enterprisesData = ref([
  {
    id: 1,
    name: '灵璧县化工厂',
    type: '化工企业',
    address: '灵璧县工业园区东区A12号',
    contact: '张经理 (13812345678)',
    complianceScore: 86,
    stats: [
      { label: '年度环保投入', value: '320万元', trend: 'up', change: '12%' },
      { label: '环保设施数量', value: '12套', trend: 'up', change: '2套' },
      { label: '年度能源消耗', value: '1850吨标煤', trend: 'down', change: '5%' },
      { label: '环保人员数量', value: '8人', trend: 'stable', change: '0%' }
    ],
    emissions: [
      { name: 'VOCs', value: 2.8, unit: 'mg/m³', standard: 3.0, status: 'good', trend: 'down', change: '8%' },
      { name: '氮氧化物', value: 35, unit: 'mg/m³', standard: 50, status: 'good', trend: 'down', change: '12%' },
      { name: '二氧化硫', value: 28, unit: 'mg/m³', standard: 35, status: 'good', trend: 'down', change: '5%' },
      { name: '废水COD', value: 48, unit: 'mg/L', standard: 50, status: 'warning', trend: 'up', change: '3%' },
      { name: '氨氮', value: 4.8, unit: 'mg/L', standard: 5.0, status: 'warning', trend: 'stable', change: '0%' }
    ],
    violations: [
      {
        time: '2023-06-15',
        title: '废水排放超标',
        description: '例行检查发现企业废水处理设施运行不稳定，导致COD排放接近超标。',
        status: 'resolved',
        result: '已完成整改并验收'
      },
      {
        time: '2023-03-22',
        title: 'VOCs处理设施故障',
        description: '企业VOCs处理设施因故障停运，导致废气直排。',
        status: 'resolved',
        result: '已处罚2万元并责令整改'
      }
    ],
    improvements: [
      {
        title: '升级废水处理设施',
        description: '建议对现有废水处理设施进行升级改造，增加深度处理工艺，提高处理效率。',
        priority: 'high',
        benefit: '可降低COD和氨氮排放浓度20%以上，确保稳定达标。'
      },
      {
        title: '安装VOCs在线监测系统',
        description: '在VOCs排放口安装在线监测系统，实现24小时实时监控。',
        priority: 'medium',
        benefit: '及时发现异常排放情况，避免环境污染事件发生。'
      },
      {
        title: '优化能源结构',
        description: '逐步淘汰高能耗设备，推广使用清洁能源，降低能源消耗。',
        priority: 'low',
        benefit: '每年可节约能源成本约50万元，减少碳排放约200吨。'
      }
    ]
  },
  {
    id: 2,
    name: '灵璧县塑料制品厂',
    type: '塑料加工企业',
    address: '灵璧县工业园区南区B08号',
    contact: '李经理 (13987654321)',
    complianceScore: 92,
    stats: [
      { label: '年度环保投入', value: '180万元', trend: 'up', change: '15%' },
      { label: '环保设施数量', value: '8套', trend: 'up', change: '1套' },
      { label: '年度能源消耗', value: '950吨标煤', trend: 'down', change: '8%' },
      { label: '环保人员数量', value: '5人', trend: 'up', change: '25%' }
    ],
    emissions: [
      { name: 'VOCs', value: 2.2, unit: 'mg/m³', standard: 3.0, status: 'good', trend: 'down', change: '15%' },
      { name: '氮氧化物', value: 30, unit: 'mg/m³', standard: 50, status: 'excellent', trend: 'down', change: '18%' },
      { name: '二氧化硫', value: 20, unit: 'mg/m³', standard: 35, status: 'excellent', trend: 'down', change: '12%' },
      { name: '废水COD', value: 40, unit: 'mg/L', standard: 50, status: 'good', trend: 'down', change: '10%' },
      { name: '氨氮', value: 3.5, unit: 'mg/L', standard: 5.0, status: 'good', trend: 'down', change: '8%' }
    ],
    violations: [],
    improvements: [
      {
        title: '推广清洁生产工艺',
        description: '在生产过程中推广使用低VOCs含量的原料和清洁生产工艺。',
        priority: 'medium',
        benefit: '可进一步降低VOCs排放20%以上，减少环境影响。'
      },
      {
        title: '建设雨污分流系统',
        description: '完善厂区雨污分流系统，避免雨季污水溢流。',
        priority: 'low',
        benefit: '减少雨季污水处理负荷，降低环境风险。'
      }
    ]
  },
  {
    id: 3,
    name: '灵璧县电子科技有限公司',
    type: '电子制造企业',
    address: '灵璧县工业园区西区C15号',
    contact: '王总 (13765432198)',
    complianceScore: 95,
    stats: [
      { label: '年度环保投入', value: '250万元', trend: 'up', change: '20%' },
      { label: '环保设施数量', value: '10套', trend: 'stable', change: '0%' },
      { label: '年度能源消耗', value: '780吨标煤', trend: 'down', change: '12%' },
      { label: '环保人员数量', value: '7人', trend: 'up', change: '16%' }
    ],
    emissions: [
      { name: 'VOCs', value: 1.5, unit: 'mg/m³', standard: 3.0, status: 'excellent', trend: 'down', change: '25%' },
      { name: '氮氧化物', value: 25, unit: 'mg/m³', standard: 50, status: 'excellent', trend: 'down', change: '20%' },
      { name: '二氧化硫', value: 15, unit: 'mg/m³', standard: 35, status: 'excellent', trend: 'down', change: '18%' },
      { name: '废水COD', value: 35, unit: 'mg/L', standard: 50, status: 'excellent', trend: 'down', change: '15%' },
      { name: '氨氮', value: 2.8, unit: 'mg/L', standard: 5.0, status: 'excellent', trend: 'down', change: '12%' }
    ],
    violations: [],
    improvements: [
      {
        title: '建设光伏发电系统',
        description: '在厂房屋顶安装光伏发电系统，提高清洁能源使用比例。',
        priority: 'medium',
        benefit: '每年可减少碳排放约150吨，节约电费约30万元。'
      }
    ]
  },
  {
    id: 4,
    name: '灵璧县机械制造厂',
    type: '机械制造企业',
    address: '灵璧县工业园区北区D05号',
    contact: '赵厂长 (13698765432)',
    complianceScore: 78,
    stats: [
      { label: '年度环保投入', value: '150万元', trend: 'up', change: '8%' },
      { label: '环保设施数量', value: '6套', trend: 'up', change: '1套' },
      { label: '年度能源消耗', value: '1200吨标煤', trend: 'down', change: '3%' },
      { label: '环保人员数量', value: '4人', trend: 'stable', change: '0%' }
    ],
    emissions: [
      { name: 'VOCs', value: 2.5, unit: 'mg/m³', standard: 3.0, status: 'good', trend: 'stable', change: '0%' },
      { name: '氮氧化物', value: 45, unit: 'mg/m³', standard: 50, status: 'warning', trend: 'up', change: '5%' },
      { name: '二氧化硫', value: 30, unit: 'mg/m³', standard: 35, status: 'warning', trend: 'stable', change: '0%' },
      { name: '废水COD', value: 45, unit: 'mg/L', standard: 50, status: 'warning', trend: 'down', change: '2%' },
      { name: '氨氮', value: 4.5, unit: 'mg/L', standard: 5.0, status: 'warning', trend: 'stable', change: '0%' }
    ],
    violations: [
      {
        time: '2023-05-10',
        title: '噪声超标',
        description: '接到周边居民投诉，经检测发现企业夜间生产噪声超标。',
        status: 'pending',
        result: '整改中'
      },
      {
        time: '2023-02-18',
        title: '废气处理设施运行不正常',
        description: '例行检查发现企业废气处理设施运行不正常，部分参数异常。',
        status: 'resolved',
        result: '已完成整改'
      }
    ],
    improvements: [
      {
        title: '升级废气处理设施',
        description: '对现有废气处理设施进行升级改造，提高处理效率。',
        priority: 'high',
        benefit: '可降低氮氧化物和二氧化硫排放浓度15%以上，确保稳定达标。'
      },
      {
        title: '加强噪声控制',
        description: '对主要噪声源进行隔音降噪处理，减少噪声污染。',
        priority: 'high',
        benefit: '可降低厂界噪声5-10分贝，消除居民投诉。'
      },
      {
        title: '优化生产工艺',
        description: '优化生产工艺，减少污染物产生量。',
        priority: 'medium',
        benefit: '可减少污染物产生量约10%，降低处理负荷。'
      }
    ]
  },
  {
    id: 5,
    name: '灵璧县食品加工厂',
    type: '食品加工企业',
    address: '灵璧县工业园区东区A08号',
    contact: '钱经理 (13612345678)',
    complianceScore: 88,
    stats: [
      { label: '年度环保投入', value: '120万元', trend: 'up', change: '10%' },
      { label: '环保设施数量', value: '5套', trend: 'stable', change: '0%' },
      { label: '年度能源消耗', value: '650吨标煤', trend: 'down', change: '7%' },
      { label: '环保人员数量', value: '3人', trend: 'up', change: '50%' }
    ],
    emissions: [
      { name: 'VOCs', value: 1.8, unit: 'mg/m³', standard: 3.0, status: 'excellent', trend: 'down', change: '10%' },
      { name: '氮氧化物', value: 30, unit: 'mg/m³', standard: 50, status: 'excellent', trend: 'down', change: '8%' },
      { name: '二氧化硫', value: 20, unit: 'mg/m³', standard: 35, status: 'excellent', trend: 'down', change: '5%' },
      { name: '废水COD', value: 55, unit: 'mg/L', standard: 50, status: 'bad', trend: 'up', change: '10%' },
      { name: '氨氮', value: 4.8, unit: 'mg/L', standard: 5.0, status: 'warning', trend: 'stable', change: '0%' }
    ],
    violations: [
      {
        time: '2023-04-25',
        title: '废水COD超标',
        description: '例行检查发现企业废水COD排放超标。',
        status: 'resolved',
        result: '已处罚1万元并责令整改'
      }
    ],
    improvements: [
      {
        title: '升级废水处理设施',
        description: '对现有废水处理设施进行升级改造，增加深度处理工艺。',
        priority: 'high',
        benefit: '可降低COD排放浓度25%以上，确保稳定达标。'
      },
      {
        title: '加强环保管理',
        description: '建立健全环保管理制度，加强日常监测和维护。',
        priority: 'medium',
        benefit: '提高环保设施运行效率，降低环境风险。'
      }
    ]
  }
])

// 获取当前选中的企业数据
const selectedEnterpriseData = computed(() => {
  return enterprisesData.value.find(item => item.id === currentEnterprise.value)
})

// 选择企业
const selectEnterprise = (id: number) => {
  currentEnterprise.value = id
  
  // 切换企业后重新初始化图表
  setTimeout(() => {
    if (currentTab.value === 'overview') {
      initFacilitiesChart()
      initInvestmentChart()
    } else if (currentTab.value === 'emissions') {
      initEmissionsChart()
    }
  }, 100)
}

// 获取评分等级样式
const getScoreClass = (score: number) => {
  if (score >= 90) return 'excellent'
  if (score >= 80) return 'good'
  if (score >= 70) return 'average'
  if (score >= 60) return 'poor'
  return 'bad'
}

// 获取排放状态文本
const getEmissionStatus = (status: string) => {
  switch (status) {
    case 'excellent': return '优秀'
    case 'good': return '良好'
    case 'warning': return '临界'
    case 'exceeded': return '超标'
    default: return '未知'
  }
}

// 初始化环保设施运行情况图表
const initFacilitiesChart = () => {
  if (!facilitiesChartRef.value) return
  
  const chart = echarts.init(facilitiesChartRef.value)
  
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '设施运行状态',
        type: 'pie',
        radius: '70%',
        center: ['60%', '50%'],
        data: [
          { value: 75, name: '正常运行', itemStyle: { color: '#0f0' } },
          { value: 15, name: '运行不稳定', itemStyle: { color: '#ff0' } },
          { value: 10, name: '检修中', itemStyle: { color: '#f80' } },
          { value: 0, name: '故障停运', itemStyle: { color: '#f00' } }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          color: '#fff'
        },
        labelLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          }
        }
      }
    ]
  }
  
  chart.setOption(option)
  
  // 监听窗口大小变化，调整图表大小
  window.addEventListener('resize', () => {
    chart.resize()
  })
}

// 初始化环保投入趋势图表
const initInvestmentChart = () => {
  if (!investmentChartRef.value) return
  
  const chart = echarts.init(investmentChartRef.value)
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['环保设施投入', '运行维护费用', '监测费用'],
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['2019', '2020', '2021', '2022', '2023'],
        axisLine: {
          lineStyle: {
            color: '#0ff'
          }
        },
        axisLabel: {
          color: '#fff'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '万元',
        axisLabel: {
          color: '#fff'
        },
        axisLine: {
          lineStyle: {
            color: '#0ff'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(0,255,255,0.1)'
          }
        }
      }
    ],
    series: [
      {
        name: '环保设施投入',
        type: 'bar',
        stack: '投入',
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 145, 160, 175],
        itemStyle: {
          color: '#0ff'
        }
      },
      {
        name: '运行维护费用',
        type: 'bar',
        stack: '投入',
        emphasis: {
          focus: 'series'
        },
        data: [80, 85, 90, 95, 105],
        itemStyle: {
          color: '#0f0'
        }
      },
      {
        name: '监测费用',
        type: 'bar',
        stack: '投入',
        emphasis: {
          focus: 'series'
        },
        data: [20, 25, 30, 35, 40],
        itemStyle: {
          color: '#ff0'
        }
      }
    ]
  }
  
  chart.setOption(option)
  
  // 监听窗口大小变化，调整图表大小
  window.addEventListener('resize', () => {
    chart.resize()
  })
}

// 初始化排放趋势图表
const initEmissionsChart = () => {
  if (!emissionsChartRef.value) return
  
  const chart = echarts.init(emissionsChartRef.value)
  
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['VOCs', '氮氧化物', '二氧化硫', '废水COD', '氨氮'],
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
      axisLine: {
        lineStyle: {
          color: '#0ff'
        }
      },
      axisLabel: {
        color: '#fff'
      }
    },
    yAxis: {
      type: 'value',
      name: '达标率(%)',
      min: 60,
      max: 100,
      axisLabel: {
        color: '#fff'
      },
      axisLine: {
        lineStyle: {
          color: '#0ff'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(0,255,255,0.1)'
        }
      }
    },
    series: [
      {
        name: 'VOCs',
        type: 'line',
        data: [85, 82, 88, 90, 92, 94],
        itemStyle: {
          color: '#0ff'
        }
      },
      {
        name: '氮氧化物',
        type: 'line',
        data: [80, 82, 85, 88, 90, 92],
        itemStyle: {
          color: '#0f0'
        }
      },
      {
        name: '二氧化硫',
        type: 'line',
        data: [82, 85, 88, 90, 92, 95],
        itemStyle: {
          color: '#ff0'
        }
      },
      {
        name: '废水COD',
        type: 'line',
        data: [75, 78, 80, 82, 85, 88],
        itemStyle: {
          color: '#f80'
        }
      },
      {
        name: '氨氮',
        type: 'line',
        data: [78, 80, 82, 85, 88, 90],
        itemStyle: {
          color: '#f00'
        }
      }
    ]
  }
  
  chart.setOption(option)
  
  // 监听窗口大小变化，调整图表大小
  window.addEventListener('resize', () => {
    chart.resize()
  })
}

// 组件挂载
onMounted(() => {
  // 初始化图表
  setTimeout(() => {
    initFacilitiesChart()
    initInvestmentChart()
  }, 300)
  
  // 启动定时器
  timer = setInterval(() => {
    currentTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
  }, 1000)
})

// 组件卸载
onUnmounted(() => {
  clearInterval(timer)
  
  // 销毁图表实例
  if (facilitiesChartRef.value) {
    const chart = (facilitiesChartRef.value as any)._echarts_instance_
    if (chart) {
      chart.dispose()
    }
  }
  
  if (investmentChartRef.value) {
    const chart = (investmentChartRef.value as any)._echarts_instance_
    if (chart) {
      chart.dispose()
    }
  }
  
  if (emissionsChartRef.value) {
    const chart = (emissionsChartRef.value as any)._echarts_instance_
    if (chart) {
      chart.dispose()
    }
  }
})

// 监听选项卡变化
watch(currentTab, (newVal) => {
  if (newVal === 'overview') {
    setTimeout(() => {
      initFacilitiesChart()
      initInvestmentChart()
    }, 100)
  } else if (newVal === 'emissions') {
    setTimeout(() => {
      initEmissionsChart()
    }, 100)
  }
})
</script>

<template>
  <div class="enterprise-profile" :key="$route.fullPath">
    <!-- 顶部标题 -->
    <header class="page-header">
      <h1>灵璧县人工智能产业园企业环保画像</h1>
      <div class="current-time">{{ currentTime }}</div>
    </header>

    <div class="page-content">
      <!-- 企业选择器 -->
      <div class="enterprise-selector">
        <div class="selector-label">选择企业:</div>
        <div class="selector-options">
          <button 
            v-for="(enterprise, index) in enterprises" 
            :key="index"
            :class="['enterprise-option', { active: currentEnterprise === enterprise.id }]"
            @click="selectEnterprise(enterprise.id)"
          >
            {{ enterprise.name }}
          </button>
        </div>
      </div>
      
      <!-- 企业环保概况 -->
      <div class="profile-summary" v-if="selectedEnterpriseData">
        <div class="enterprise-info">
          <div class="enterprise-name">{{ selectedEnterpriseData.name }}</div>
          <div class="enterprise-type">{{ selectedEnterpriseData.type }}</div>
          <div class="enterprise-address">
            <span class="info-label">地址:</span>
            <span class="info-value">{{ selectedEnterpriseData.address }}</span>
          </div>
          <div class="enterprise-contact">
            <span class="info-label">联系人:</span>
            <span class="info-value">{{ selectedEnterpriseData.contact }}</span>
          </div>
        </div>
        
        <div class="compliance-score">
          <div class="score-circle" :class="getScoreClass(selectedEnterpriseData.complianceScore)">
            {{ selectedEnterpriseData.complianceScore }}
          </div>
          <div class="score-label">环保合规评分</div>
        </div>
      </div>
      
      <!-- 选项卡 -->
      <div class="tab-container">
        <button 
          class="tab-button" 
          :class="{ active: currentTab === 'overview' }"
          @click="currentTab = 'overview'"
        >
          环保概况
        </button>
        <button 
          class="tab-button" 
          :class="{ active: currentTab === 'emissions' }"
          @click="currentTab = 'emissions'"
        >
          排放数据
        </button>
        <button 
          class="tab-button" 
          :class="{ active: currentTab === 'violations' }"
          @click="currentTab = 'violations'"
        >
          违规记录
        </button>
        <button 
          class="tab-button" 
          :class="{ active: currentTab === 'improvements' }"
          @click="currentTab = 'improvements'"
        >
          改进建议
        </button>
      </div>
      
      <div class="profile-details">
        <!-- 环保概况 -->
        <div v-if="currentTab === 'overview'" class="overview-content">
          <div class="overview-charts">
            <div class="chart-item">
              <div class="chart-title">环保设施运行情况</div>
              <div ref="facilitiesChartRef" class="chart-container"></div>
            </div>
            <div class="chart-item">
              <div class="chart-title">环保投入趋势</div>
              <div ref="investmentChartRef" class="chart-container"></div>
            </div>
          </div>
          
          <div class="overview-stats">
            <div class="stat-item" v-for="(stat, index) in selectedEnterpriseData?.stats" :key="index">
              <div class="stat-value" :class="stat.trend">{{ stat.value }}</div>
              <div class="stat-label">{{ stat.label }}</div>
              <div class="stat-trend">
                <span v-if="stat.trend === 'up'">↑</span>
                <span v-else-if="stat.trend === 'down'">↓</span>
                <span v-else>-</span>
                {{ stat.change }}
              </div>
            </div>
          </div>
        </div>
        
        <!-- 排放数据 -->
        <div v-if="currentTab === 'emissions'" class="emissions-content">
          <div class="emissions-charts">
            <div class="chart-item">
              <div class="chart-title">主要污染物排放趋势</div>
              <div ref="emissionsChartRef" class="chart-container"></div>
            </div>
          </div>
          
          <div class="emissions-table">
            <table>
              <thead>
                <tr>
                  <th>污染物</th>
                  <th>本月排放量</th>
                  <th>排放标准</th>
                  <th>达标情况</th>
                  <th>同比变化</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in selectedEnterpriseData?.emissions" :key="index">
                  <td>{{ item.name }}</td>
                  <td>{{ item.value }} {{ item.unit }}</td>
                  <td>{{ item.standard }} {{ item.unit }}</td>
                  <td>
                    <span class="status-badge" :class="item.status">
                      {{ getEmissionStatus(item.status) }}
                    </span>
                  </td>
                  <td :class="item.trend">
                    <span v-if="item.trend === 'up'">↑</span>
                    <span v-else-if="item.trend === 'down'">↓</span>
                    <span v-else>-</span>
                    {{ item.change }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        
        <!-- 违规记录 -->
        <div v-if="currentTab === 'violations'" class="violations-content">
          <div v-if="selectedEnterpriseData?.violations.length === 0" class="no-data">
            <div class="no-data-icon">✓</div>
            <div class="no-data-text">该企业暂无环保违规记录</div>
          </div>
          
          <div v-else class="violations-list">
            <div v-for="(item, index) in selectedEnterpriseData?.violations" :key="index" class="violation-item">
              <div class="violation-time">{{ item.time }}</div>
              <div class="violation-content">
                <div class="violation-title">{{ item.title }}</div>
                <div class="violation-desc">{{ item.description }}</div>
                <div class="violation-result" :class="item.status">
                  <span class="result-label">处理结果:</span>
                  <span class="result-value">{{ item.result }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 改进建议 -->
        <div v-if="currentTab === 'improvements'" class="improvements-content">
          <div class="improvements-list">
            <div v-for="(item, index) in selectedEnterpriseData?.improvements" :key="index" class="improvement-item">
              <div class="improvement-icon" :class="item.priority"></div>
              <div class="improvement-content">
                <div class="improvement-title">{{ item.title }}</div>
                <div class="improvement-desc">{{ item.description }}</div>
                <div class="improvement-benefit">
                  <span class="benefit-label">预期效益:</span>
                  <span class="benefit-value">{{ item.benefit }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.enterprise-profile {
  height: 100%;
  background: linear-gradient(135deg, #0a2744 0%, #001529 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  
  // 页面头部
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(0,255,255,0.3);
    
    h1 {
      font-size: 20px;
      margin: 0;
      color: #0ff;
    }
    
    .current-time {
      font-size: 14px;
      color: rgba(255,255,255,0.7);
    }
  }
  
  // 页面内容
  .page-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    
    // 企业选择器
    .enterprise-selector {
      display: flex;
      align-items: center;
      gap: 15px;
      
      .selector-label {
        font-size: 16px;
        color: #0ff;
      }
      
      .selector-options {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        
        .enterprise-option {
          background: rgba(0,0,0,0.3);
          border: 1px solid rgba(0,255,255,0.3);
          color: #fff;
          padding: 8px 15px;
          border-radius: 4px;
          cursor: pointer;
          transition: all 0.3s;
          
          &:hover {
            background: rgba(0,255,255,0.1);
          }
          
          &.active {
            background: rgba(0,255,255,0.2);
            color: #0ff;
            border-color: #0ff;
          }
        }
      }
    }
    
    // 企业环保概况
    .profile-summary {
      display: flex;
      justify-content: space-between;
      background: rgba(0,0,0,0.2);
      border-radius: 8px;
      padding: 20px;
      
      .enterprise-info {
        flex: 1;
        
        .enterprise-name {
          font-size: 24px;
          font-weight: bold;
          color: #0ff;
          margin-bottom: 5px;
        }
        
        .enterprise-type {
          font-size: 16px;
          color: rgba(255,255,255,0.7);
          margin-bottom: 15px;
        }
        
        .enterprise-address, .enterprise-contact {
          font-size: 14px;
          margin-bottom: 5px;
          
          .info-label {
            color: rgba(255,255,255,0.7);
            margin-right: 5px;
          }
          
          .info-value {
            color: #fff;
          }
        }
      }
      
      .compliance-score {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .score-circle {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 28px;
          font-weight: bold;
          border: 2px solid;
          
          &.excellent {
            color: #0f0;
            border-color: #0f0;
            box-shadow: 0 0 10px rgba(0,255,0,0.5);
          }
          
          &.good {
            color: #0ff;
            border-color: #0ff;
            box-shadow: 0 0 10px rgba(0,255,255,0.5);
          }
          
          &.average {
            color: #ff0;
            border-color: #ff0;
            box-shadow: 0 0 10px rgba(255,255,0,0.5);
          }
          
          &.poor {
            color: #ffa500;
            border-color: #ffa500;
            box-shadow: 0 0 10px rgba(255,165,0,0.5);
          }
          
          &.bad {
            color: #f00;
            border-color: #f00;
            box-shadow: 0 0 10px rgba(255,0,0,0.5);
          }
        }
        
        .score-label {
          margin-top: 10px;
          font-size: 14px;
          color: rgba(255,255,255,0.7);
        }
      }
    }
    
    // 选项卡
    .tab-container {
      display: flex;
      justify-content: space-between;
      margin: 20px 0;
      background: #001529;
      border-bottom: 2px solid rgba(0,255,255,0.3);
      
      .tab-button {
        flex: 1;
        background: transparent;
        border: none;
        color: #fff;
        padding: 15px 0;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s;
        position: relative;
        
        &:hover {
          color: #0ff;
        }
        
        &.active {
          color: #0ff;
          font-weight: bold;
          
          &:after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: #0ff;
            box-shadow: 0 0 10px rgba(0,255,255,0.5);
          }
        }
      }
    }
    
    // 详情内容
    .profile-details {
      background: rgba(0,0,0,0.2);
      border-radius: 8px;
      padding: 20px;
      flex: 1;
      
      // 环保概况
      .overview-content {
        .overview-charts {
          display: flex;
          gap: 20px;
          margin-bottom: 20px;
          
          .chart-item {
            flex: 1;
            background: rgba(255,255,255,0.02);
            border-radius: 4px;
            padding: 10px;
            
            .chart-title {
              font-size: 16px;
              color: #0ff;
              margin-bottom: 10px;
              text-align: center;
            }
            
            .chart-container {
              height: 250px;
            }
          }
        }
        
        .overview-stats {
          display: flex;
          flex-wrap: wrap;
          gap: 20px;
          
          .stat-item {
            flex: 1;
            min-width: 200px;
            background: rgba(255,255,255,0.02);
            border-radius: 4px;
            padding: 15px;
            text-align: center;
            
            .stat-value {
              font-size: 24px;
              font-weight: bold;
              margin-bottom: 5px;
              
              &.up {
                color: #0f0;
              }
              
              &.down {
                color: #0ff;
              }
              
              &.stable {
                color: #ff0;
              }
            }
            
            .stat-label {
              font-size: 14px;
              color: rgba(255,255,255,0.7);
              margin-bottom: 10px;
            }
            
            .stat-trend {
              font-size: 12px;
              
              &.up {
                color: #0f0;
              }
              
              &.down {
                color: #0ff;
              }
              
              &.stable {
                color: #ff0;
              }
            }
          }
        }
      }
      
      // 排放数据
      .emissions-content {
        .emissions-charts {
          margin-bottom: 20px;
          
          .chart-item {
            background: rgba(255,255,255,0.02);
            border-radius: 4px;
            padding: 10px;
            
            .chart-title {
              font-size: 16px;
              color: #0ff;
              margin-bottom: 10px;
              text-align: center;
            }
            
            .chart-container {
              height: 250px;
            }
          }
        }
        
        .emissions-table {
          width: 100%;
          overflow-x: auto;
          
          table {
            width: 100%;
            border-collapse: collapse;
            
            th, td {
              padding: 10px;
              text-align: left;
              border-bottom: 1px solid rgba(255,255,255,0.1);
            }
            
            th {
              color: #0ff;
              font-weight: normal;
            }
            
            .status-badge {
              display: inline-block;
              padding: 2px 8px;
              border-radius: 10px;
              font-size: 12px;
              
              &.excellent {
                background: rgba(0,255,0,0.2);
                color: #0f0;
              }
              
              &.good {
                background: rgba(0,255,255,0.2);
                color: #0ff;
              }
              
              &.warning {
                background: rgba(255,255,0,0.2);
                color: #ff0;
              }
              
              &.exceeded {
                background: rgba(255,0,0,0.2);
                color: #f00;
              }
            }
            
            .up {
              color: #f00;
            }
            
            .down {
              color: #0f0;
            }
            
            .stable {
              color: #ff0;
            }
          }
        }
      }
      
      // 违规记录
      .violations-content {
        .no-data {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 200px;
          
          .no-data-icon {
            font-size: 48px;
            color: #0f0;
            margin-bottom: 10px;
          }
          
          .no-data-text {
            font-size: 16px;
            color: rgba(255,255,255,0.7);
          }
        }
        
        .violations-list {
          display: flex;
          flex-direction: column;
          gap: 15px;
          
          .violation-item {
            display: flex;
            gap: 15px;
            background: rgba(255,255,255,0.02);
            border-radius: 4px;
            padding: 15px;
            
            .violation-time {
              min-width: 100px;
              color: #0ff;
              font-size: 14px;
            }
            
            .violation-content {
              flex: 1;
              
              .violation-title {
                font-size: 16px;
                font-weight: bold;
                color: #fff;
                margin-bottom: 5px;
              }
              
              .violation-desc {
                font-size: 14px;
                color: rgba(255,255,255,0.7);
                margin-bottom: 10px;
              }
              
              .violation-result {
                font-size: 14px;
                
                .result-label {
                  color: rgba(255,255,255,0.7);
                  margin-right: 5px;
                }
                
                &.resolved .result-value {
                  color: #0f0;
                }
                
                &.pending .result-value {
                  color: #ff0;
                }
                
                &.failed .result-value {
                  color: #f00;
                }
              }
            }
          }
        }
      }
      
      // 改进建议
      .improvements-content {
        .improvements-list {
          display: flex;
          flex-direction: column;
          gap: 15px;
          
          .improvement-item {
            display: flex;
            gap: 15px;
            background: rgba(255,255,255,0.02);
            border-radius: 4px;
            padding: 15px;
            
            .improvement-icon {
              width: 16px;
              height: 16px;
              border-radius: 50%;
              margin-top: 3px;
              
              &.high {
                background: #f00;
                box-shadow: 0 0 5px rgba(255,0,0,0.5);
              }
              
              &.medium {
                background: #ff0;
                box-shadow: 0 0 5px rgba(255,255,0,0.5);
              }
              
              &.low {
                background: #0ff;
                box-shadow: 0 0 5px rgba(0,255,255,0.5);
              }
            }
            
            .improvement-content {
              flex: 1;
              
              .improvement-title {
                font-size: 16px;
                font-weight: bold;
                color: #fff;
                margin-bottom: 5px;
              }
              
              .improvement-desc {
                font-size: 14px;
                color: rgba(255,255,255,0.7);
                margin-bottom: 10px;
              }
              
              .improvement-benefit {
                font-size: 14px;
                
                .benefit-label {
                  color: rgba(255,255,255,0.7);
                  margin-right: 5px;
                }
                
                .benefit-value {
                  color: #0f0;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style> 